<!DOCTYPE html>
<html lang="en" style="height: 100%">
<head>
    <meta charset="UTF-8">
    <title>教务数据分析</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link href="__PUBLIC__/css/layui.css" rel="stylesheet" type="text/css"/>
    <link href="__PUBLIC__/css/admin.css" rel="stylesheet" type="text/css"/>
    <link href="__PUBLIC__/css/public.css" rel="stylesheet" type="text/css"/>
    <style>
        #myTab{
            margin-right: 100px;
        }
        #myTab li{
            float: right;
            margin-left: 20px;
        }
        #myTab li:nth-of-type(3){
            border-bottom: 2px solid #3398DB;
        }
        #myTab li:nth-of-type(1){
            margin-right: 100px;
        }
    </style>
    <script src="__PUBLIC__/js/echarts.common.min.js"></script>
</head>
<body style="height: 100%; margin: 0">
<div class="layui-conter" style="height: 100%">
    <div class="layui-col-md12" style="height: 100%">
        <div class="navigation" >
            <span>数据></span><span>数据分析></span><span>教务数据分析</span>
        </div>

        <div class="white-conter" style="height: 90%" >
            <div class="layui-col-md12">
                <div class="layui-card">
                    <div class="title-blue"><b>新增比</b></div>
                </div>
            </div>
            <div class="layui-card-body" style="margin-left: 30%">
                <form class="layui-form" action="" lay-filter="component-form-group">
                    <div class=" layui-row" style="margin-top: 20px">
                        <div class=" layui-col-xs3" style="width: 20%;">
                            <label class="layui-form-label">数据来源：</label>
                            <div class="layui-input-inline" style="width: 120px;">
                                <select name="quiz2">
                                    <option value="" selected="">综合分析</option>
                                    <option value="1" ></option>
                                    <option value="2"></option>
                                </select>
                            </div>
                        </div>
                        <div class=" layui-col-xs3" style="width: 20%;">
                            <label class="layui-form-label">校区选择：</label>
                            <div class="layui-input-inline" style="width: 120px;">
                                <select name="quiz3">
                                    <option value="" selected="">普陀校区</option>
                                    <option value="1">1</option>
                                    <option value="2">2</option>
                                </select>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
            <ul id="myTab" class="nav nav-tabs" style="height: 90%;">
                <div class="tab-content" style="height: 100%;">
                    <div class="tab-pane fade in active" id="chart1" ></div>
                    <div class="tab-pane fade" id="container" style="height: 100%;"></div>
                    <div class="tab-pane fade in active" id="chart1"></div>
                </div>
            </ul>
        </div>

    </div>
</div>
</body>
<script>
    var dom = document.getElementById("container");
    //自适应宽高
    var myChartContainer = function () {
        dom.style.width = window.innerWidth-160 +'px';
        // dom.style.height = window.innerHeight+'px';
    };
    myChartContainer();

    var myChart = echarts.init(dom);
    var app = {};
    option = null;
    app.title = '坐标轴刻度与标签对齐';
    var data1 = [80,70,40,40,50,40,20,40,40,40,40,40];
    var data2 = [20,20,60];
    var ydata = ['0','20','40','60','80','100'];
    var xdata = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'];
    option = {
        color: ['#3398DB'],
        textStyle:{
            color:["#666"]
        },
        tooltip : {
            trigger: 'axis',
            axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                type : 'line'        // 默认为直线，可选为：'line' | 'shadow'
            }
        },
        legend: {
            orient: 'horizontal',
            left:'90%',
            data: ["原占比",'在读'],
            textStyle:{
                fontSize:16,
                padding:10,
            }

        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis : [
            {
                type : 'category',
                data : xdata,
                axisTick: {
                    show: false,
                    alignWithLabel: true,
                },
                offset:10
            }
        ],
        yAxis : [
            {
                type:'value',
                data:ydata,
                name:'人（个）',
                nameTextStyle:{
                    fontSize:16,
                    padding:10
                },
                axisTick: {
                    show: false
                },
                splitLine:{
                    lineStyle:{
                        type:"dashed"
                    }

                }
            }
        ],
        series : [
            {
                name:'原占比',
                type:'bar',
                barWidth: '20%',
                stack:'one',
                data:data1,
                itemStyle:{
                    normal:{
                        color: function (params){
                            var colorList = ['#f9a400','#f9a400','#f9a400'];
                            return colorList[params.dataIndex];
                        }
                    }
                },
                label:{
                    normal:{
                        show: true,
                        position: 'inside',//数据在中间显示
                        formatter:'{c}%',//百分比显示
                        color:'#fff'
                    }
                }
            },
            {
                name:'在读',
                type:'bar',
                stack:'one',
                barWidth:'20%',
                data:data2,
                itemStyle:{
                    normal:{
                        color: function (params){
                            var colorList = ['#cecece','#cecece','#cecece'];
                            return colorList[params.dataIndex];
                        }
                    }
                },
                label:{
                    normal:{
                        show: true,
                        position: 'top',
                        color:'#000',
                        formatter: function(params) {
                            //格式化柱状图显示label
                            var dataValue1=0;
                            for(var i=0;i<xdata.length;i++){
                                if(params.name==xdata[i]){
                                    dataValue1=data1[i];
                                }
                            }
                            return params.value+dataValue1;
                        }
                    }
                }
            }
        ]
    };
    ;

    if (option && typeof option === "object") {
        myChart.setOption(option, true);
    }


    //浏览器大小改变时重置大小
    window.onresize = function () {
        myChartContainer();
        myChart.resize();
    };
</script>
<script src="__PUBLIC__/js/layui.all.js"></script>
</html>